<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>Document</title>
        <style>
            #div1{width: 100px; height: 100px; background-color: red; border: 1px solid black;padding: 8px; margin: 20px}
        </style>
        <script src = 'jquery-1.10.1.min.js'></script>
        <script>
            // width()    innerWidth()    outerWidth() 
            // height()   innerHeight()   outerHeight()
            /* 
                offsetWidth  width + border + padding
             */
            $(function(){
                // alert($("#div1").css("width")); //"100px" 字符串
                alert($("#div1").width()); //width
                alert($("#div1").innerWidth());  //width + padding
                alert($("#div1").outerWidth());  //width + border + padding
                alert($("#div1").outerWidth(true)); //width + border + padding + margin
                
            })

        </script>
    </head>
    <body>
        <div id = 'div1'></div>
    </body>
</html>